<div class="container">
  <page-header title="Alerts"></page-header>

  <empty-state icon="fa fa-bell-o"
               description="Get notified on certain events"
               illustration="alert"
               show-alert-step="true"
               help-link="https://redash.io/help/user-guide/alerts/"
               ng-if="$ctrl.showEmptyState"></empty-state>

  <div class="bg-white tiled" ng-if="$ctrl.showList">
    <table class="table table-condensed table-hover table-data">
      <thead>
      <tr>
        <th class="sortable-column" ng-click="$ctrl.alerts.orderBy('name')">Name <sort-icon column="'name'" sort-column="$ctrl.alerts.orderByField" reverse="$ctrl.alerts.orderByReverse"></sort-icon></th>
        <th class="sortable-column" ng-click="$ctrl.alerts.orderBy('created_by')">Created By <sort-icon column="'created_by'" sort-column="$ctrl.alerts.orderByField" reverse="$ctrl.alerts.orderByReverse"></sort-icon></th>
        <th class="sortable-column" ng-click="$ctrl.alerts.orderBy('state')">State <sort-icon column="'state'" sort-column="$ctrl.alerts.orderByField" reverse="$ctrl.alerts.orderByReverse"></sort-icon></th>
        <th class="sortable-column" ng-click="$ctrl.alerts.orderBy('created_at')">Created At <sort-icon column="'created_at'" sort-column="$ctrl.alerts.orderByField" reverse="$ctrl.alerts.orderByReverse"></sort-icon></th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="row in $ctrl.alerts.getPageRows()">
        <td class="table-main-title"><a href="alerts/{{row.id}}">{{row.name}}</a></td>
        <td>{{row.created_by}}</td>
        <td><span ng-class="row.class">{{row.state | uppercase}}</span> since <span am-time-ago="row.updated_at"></span></td>
        <td><span am-time-ago="row.created_at"></span></td>
      </tr>
      </tbody>
    </table>
    <paginator paginator="$ctrl.alerts"></paginator>
  </div>

</div>
